<template>
  <div>
    <!--  提示-->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>您正在做的业务是:</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限分配</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--根据条件查询-->
    <div>
      <!-- 条件查询 -->
      <b>根据姓名查询:</b>
      <el-input v-model="name" style="width: 150px;"/>
      <el-button type="primary" @click="init">查询</el-button>
    </div>

    <!--  表格-->
    <div>
      <el-table
          :data="userData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="name"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="descn"
            label="描述"
            width="250">
        </el-table-column>
        <el-table-column
            prop="code"
            label="关键字"
            width="180">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="200">
        </el-table-column>
        <el-table-column
            prop="updateTime"
            label="修改时间"
            width="200">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="medium ">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--  分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(pageNum)"
          :page-sizes="[2, 4, 8, 16]"
          :page-size="Number(pageSize)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)">
      </el-pagination>
    </div>

<!--    弹出框-->
    <div>
      <el-dialog title="权限分配:" :visible.sync="dialogFormVisible">
        <el-tree
            :data="list"
            :props="defaultProps"
            node-key="id"
            :default-checked-keys="permissionList"
            show-checkbox
            ref="tree"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick">

        </el-tree>

        <el-button type="info" @click="dialogFormVisible=false">取消</el-button>
        <el-button type="primary" @click="getCheckedKeys">添加</el-button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import request from "../../request.js"

export default {
  name: "permission",
  data() {
    return {
      dialogFormVisible:false,
      name: '',
      pageNum: '',
      pageSize: '',
      total: '',
      userData: [],
      //展示所有权限
      list: [],
      //展示角色所拥有的权限
      permissionList: [],
      //树形控件配置
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      //角色id
      roleID:''
    }
  }, methods: {
    //当前数量改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.init();
    },
    //页码改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.init();
    },
    init() {
      axios.get("http://localhost:8150/permission/queryPermission", {
        params: {
          'name': this.name,
          'pageNum': this.pageNum,
          'pageSize': this.pageSize
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.userData = data.data.data.records;
        this.pageNum = data.data.data.current;
        this.pageSize = data.data.data.size;
        this.total = data.data.data.total;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    handleClick(row) {
      this.dialogFormVisible=true;
      this.roleID=row.id;
      axios.get("http://localhost:8150/permission/" + row.id).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.list = data.data.data.list;
        this.permissionList = data.data.data.permissionList;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    //树形显示菜单列表
    handleNodeClick(data){
      console.log(data);
    },
    //通过key获取它的id
    getCheckedKeys() {
    //  console.log(this.$refs.tree.getCheckedKeys());
      let map={
        'arr':this.$refs.tree.getCheckedKeys(),
        'id':this.roleID
      }
      axios.post("http://localhost:8150/permission/permissionAssignment",map).then(data =>{
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        if (data.data.flag){
          this.init();
        }

        this.$message({
          showClose:true,
          message:data.data.message,
          type:data.data.flag==true?"success":"error"
        });
      }).catch(e =>{
        alert("错误信息为:"+e)
      })
      this.dialogFormVisible=false;
    },
  }, created() {
    this.init();
  }
}
</script>

<style scoped>

</style>